import React, {Component} from 'react';
import {connect} from 'dva';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Icon,
  Dropdown,
  Popover,
  InputNumber,
  DatePicker,
  message,
  Badge,
  Divider,
  Steps,
  Spin,
  Upload,
  Collapse, Empty,Cascader,
  Select, Button, Tabs, Modal
} from 'antd';
const { Panel } = Collapse;
const { TabPane } = Tabs;

const {MonthPicker, RangePicker} = DatePicker;
const Option = Select.Option;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const FormItem = Form.Item;
import Class from '../upload.less'

@Form.create()
export default class xxx extends Component {
  componentDidMount() {

  }
  state ={
    itemImgFile :[],
    contentImgFile :[],
    carouselImageFile :[],
    carouselVideoFile :[],
    loading : false
  }
  constructor(props) {
    super(props);
    const {updateData} = props;
    let itemImgFile =[];
    let contentImgFile  = [];
    if (updateData && updateData.item_image){
      itemImgFile.push(this.markFileParms(updateData.item_image))
    }
    if (updateData && updateData.content_image){
        let content_img_list = updateData.content_image.split(",");
        content_img_list.map((item)=>{
          contentImgFile.push(this.markFileParms(item))
        })
    }
    this.state = {
      itemImgFile:itemImgFile,
      contentImgFile:contentImgFile
    }
  }

  markFileParms = (fileApi)=>{
      //let parms = {};
      const file_name = fileApi.split("/")[fileApi.split("/").length-1];
      const file_id = file_name.substring(0,file_name.lastIndexOf("."));

      return  {
        uid: file_id,
        name: file_name,
        status: 'done',
        url: fileApi,
      }
  }


  render() {
    const {
      fileModalVisible,
      clseModal,
      updateData,
      deleteFile,
      updateFile,
      itemImgFile ,
      contentImgFile ,
      carouselImageFile ,
      carouselVideoFile ,
      saveState,
    }=this.props;
    const onOk=()=>{

    }
    /*const handleUpdateFile = (fileType,file,callback)=>{
          switch (fileType){
            case 'item_file':
              updateFile({
                traffic_shipId : updateData.ship_id,
                updateFileType :'item_file',
                file:{
                  ...file,
                  parmsType:'uploadFile'
                }
              });
              break;
            case 'content_file':

              break;
            case 'carousel_image':

              break;
            case 'carousel_video':

              break;
          }
    }*/
    console.log(updateData);
    const itemImgFileProps = {//多个文件上传校验
      listType:"picture-card",
      fileList : itemImgFile,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        const _this =this;
        if(fileList.length> itemImgFile.length){ //如果改变的时候文件大于 state里的说明是新增
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);

          if (!(suffix === 'jpg' ||  suffix === 'jpeg' || suffix === 'png')){
            message.error("请上传jpg或png类型文件!");
            return;
          }else if (file.size > 5242880) { //大于5m
            console.log("here");
            message.error("请上传小于5m的图片!");
            return;
          }
          console.log(fileList[fileList.length-1]);

          updateFile({
            shipId : updateData.ship_id,
            updateFileType :'item_file',
            file:{
              fileList :[fileList[fileList.length-1]],
              parmsType:'uploadFile'
            }
          },()=>{
            saveState({
              itemImgFile:[fileList[fileList.length-1]]
            })
          });
        }else {

          message.error("您只能更换列表项图片无法删除!");
        }
      },
    }
    const contenetImgFileProps = {
      listType:"picture-card",
      fileList : contentImgFile,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        const _this =this;
        if(fileList.length> contentImgFile.length){ //如果改变的时候文件大于 state里的说明是新增
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);
          if (!(suffix === 'jpg' ||  suffix === 'jpeg' || suffix === 'png')){
            message.error("请上传jpg或png类型文件!");
            return;
          }else if (file.size > 5242880) { //大于5m
            console.log("here");
            message.error("请上传小于5m的图片!");
            return;
          }
          updateFile({
            shipId : updateData.ship_id,
            updateFileType :'content_file',
            file:{
              fileList :[fileList[fileList.length-1]],
              parmsType:'uploadFile'
            }
          });
        }else {
          console.log(file);
          console.log(fileList);
          /*name: "402880ec77aaa8280177aab359e90001.png"
          status: "removed"
          timestamp: 1613477563532
          uid: "402880ec77aaa8280177aab359e90001"
          url: "/tourism/api/v1/image/402880ec77aaa8280177aab359e90001.png"*/
          deleteFile({
            ship_id : updateData.ship_id,
            update_file_type:"content_file",
            file_id:file.uid
          })
        }
      },
    }
    const carouselImgFileProps ={
      listType:"picture-card",
      fileList : carouselImageFile,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        if(fileList.length> carouselImageFile.length) { //如果改变的时候文件大于 state里的说明是新增
          const suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
          if (!(suffix === 'jpg' || suffix === 'jpeg' || suffix === 'png')) {
            message.error("请上传jpg或png类型文件!");
            return;
          } else if (file.size > 5242880) { //大于5m
            console.log("here");
            message.error("请上传小于5m的图片!");
            return;
          }
          updateFile({
            shipId : updateData.ship_id,
            updateFileType :'carousel_file',
            file:{
              fileList :[fileList[fileList.length-1]],
              parmsType:'uploadFile'
            }
          });
        }else {
          console.log(file);
          console.log(fileList);
          deleteFile({
            ship_id : updateData.ship_id,
            update_file_type:"carousel_file",
            file_id:file.uid
          })
        }
      },
    }
    const carouselVideoFileProps = {
      listType:"picture-card",
      fileList : carouselVideoFile,
      beforeUpload: file => {
        return false;
      },
      onChange : ({file,fileList})=>{
        if(fileList.length> carouselVideoFile.length) { //如果改变的时候文件大于 state里的说明是新增
          const suffix = file.name.substring(file.name.lastIndexOf('.')+1);
          if (!(suffix === 'mp4')){
            message.error("请上传mp4类型文件!");
            return
          }else if (file.size > 10485760){
            message.error("请上传小于10m的视频!");
            return
          }
          updateFile({
            shipId : updateData.ship_id,
            updateFileType :'carousel_file',
            file:{
              fileList :[fileList[fileList.length-1]],
              parmsType:'uploadFile'
            }
          });
        }else {
          console.log(file);
          console.log(fileList);
          deleteFile({
            ship_id : updateData.ship_id,
            update_file_type:"carousel_file",
            file_id:file.uid
          })
        }
      },
    }
    return (
      <Modal
        visible={fileModalVisible}
        title="编辑图片信息"
        onCancel={clseModal}
        destroyOnClose={true}
        maskClosable={false}
        width={`${document.body.clientWidth * 0.6}px`}
        footer={[
          <Button key="submit" type="primary" onClick={clseModal}>
            确定
          </Button>,
        ]}
      >

        <Collapse bordered={false} defaultActiveKey={['1','2','3','4']}>
          <Panel header={( <div>列表项图片 <span style={{color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用宽大于高的分辨率。比如 ：(1080*550)</span></div> )} key="1">
            <Upload {...itemImgFileProps}>
              <div>
                <Icon type="swap" />
                <div className={Class["ant-upload-text"]}>更换</div>
              </div>
            </Upload>
          </Panel>
          <Panel header={( <div>列表内容图片 <span style={{color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用高大于宽的分辨率。比如 ：9:16(450*800、340*600、1080*1920)</span></div> )} key="2">
            <Upload {...contenetImgFileProps}>
              <div>
                <Icon type="plus" />
                <div className={Class["ant-upload-text"]}>添加</div>
              </div>
            </Upload>
          </Panel>
          <Panel header={( <div>轮播图片 <span style={{color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用宽大于高的分辨率。比如 ：(1080*550)</span></div> )} key="3">
            <Upload {...carouselImgFileProps}>
              <div>
                <Icon type="plus" />
                <div className={Class["ant-upload-text"]}>添加</div>
              </div>
            </Upload>
          </Panel>
          <Panel header={( <div>轮播视频 <span style={{color:'red'}}> &nbsp;&nbsp;&nbsp;&nbsp;推荐使用宽大于高的分辨率。比如 ：(1080*550)</span></div> )} key="4">
            <Upload {...carouselVideoFileProps}>
              <div>
                <Icon type="plus" />
                <div className={Class["ant-upload-text"]}>添加</div>
              </div>
            </Upload>
          </Panel>
        </Collapse>


      </Modal>
    );
  }
}
